<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/store/userInfo'

const userStore = useUserStore()
const hdBannerApi = uniCloud.importObject('hd_banner')

// 防抖函数
const showToastDebounced = (() => {
	let timer = null
	return (options) => {
		if (timer) clearTimeout(timer)
		timer = setTimeout(() => {
			uni.showToast(options)
		}, 300)
	}
})()

// banner列表数据
const bannerList = ref([])
// 弹窗引用
const popup = ref(null)
// 是否编辑模式
const isEdit = ref(false)
// 表单数据
const formData = ref({
	banner_pic: '',
	sort: 0,
	status: 1
})
// 图片值数组
const imageValue = ref([])

// 获取banner列表
const getBannerList = async () => {
	try {
		const result = await hdBannerApi.getList()
		if (result.code === 200) {
			bannerList.value = result.data
		} else {
			showToastDebounced({
				title: result.msg,
				icon: 'none'
			})
		}
	} catch (e) {
		showToastDebounced({
			title: '获取轮播图列表失败',
			icon: 'none'
		})
	}
}

// 打开新增banner弹窗
const handleAdd = () => {
	isEdit.value = false
	formData.value = {
		banner_pic: '',
		sort: 0,
		status: 1
	}
	imageValue.value = []
	popup.value.open()
}

// 打开编辑banner弹窗
const handleEdit = (item) => {
	isEdit.value = true
	formData.value = { ...item }
	imageValue.value = item.banner_pic ? [{
		url: item.banner_pic
	}] : []
	popup.value.open()
}

// 删除banner
const handleDelete = async (id) => {
	try {
		const res = await uni.showModal({
			title: '提示',
			content: '确定要删除该轮播图吗？',
			confirmColor: '#ff4d4f'
		})

		if (!res.confirm) return

		const result = await hdBannerApi.delete(id)
		if (result.code === 200) {
			showToastDebounced({
				title: '删除成功',
				icon: 'success'
			})
			getBannerList()
		}
	} catch (e) {
		showToastDebounced({
			title: '删除失败',
			icon: 'none'
		})
	}
}

// 图片上传成功
const success = (e) => {
	formData.value.banner_pic = e.tempFiles[0].url
}

// 提交表单
const submitForm = async () => {
	if (!formData.value.banner_pic) {
		showToastDebounced({
			title: '请上传轮播图',
			icon: 'none'
		})
		return
	}

	try {
		const result = isEdit.value ?
			await hdBannerApi.update(formData.value._id, formData.value) :
			await hdBannerApi.add(formData.value)

		if (result.code === 200) {
			popup.value.close()
			showToastDebounced({
				title: isEdit.value ? '更新成功' : '添加成功',
				icon: 'success'
			})
			getBannerList()
		}
	} catch (e) {
		showToastDebounced({
			title: '操作失败',
			icon: 'none'
		})
	}
}

onMounted(() => {
	getBannerList()
})
</script>

<template>
	<view class="banner-manage">
		<!-- banner列表 -->
		<view class="banner-list">
			<view class="banner-item" v-for="item in bannerList" :key="item._id">
				<image class="banner-image" :src="item.banner_pic" mode="aspectFill" />
				<view class="banner-info">
					<view class="sort">排序：{{ item.sort }}</view>
					<view class="status" :class="{ 'disabled': !item.status }">
						{{ item.status ? '启用' : '禁用' }}
					</view>
					<view class="actions">
						<button class="btn edit" @tap="handleEdit(item)">编辑</button>
						<button class="btn delete" @tap="handleDelete(item._id)">删除</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部安全区域占位 -->
		<view class="safe-area"></view>

		<!-- 添加按钮 -->
		<view class="add-btn" @tap="handleAdd">
			<uni-icons custom-prefix="iconfont" type="yuan-tianjia" color="#fff" :size="24" />
			<text>新增轮播图</text>
		</view>

		<!-- 新增/编辑弹窗 -->
		<uni-popup ref="popup" type="dialog">
			<view class="popup-content">
				<view class="popup-title">{{ isEdit ? '编辑轮播图' : '新增轮播图' }}</view>
				<view class="form-item">
					<text class="label">轮播图片</text>
					<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" :limit="1"
						:image-styles="{
							width: 200,
							height: 120
						}" @success="success" />
				</view>
				<view class="form-item">
					<text class="label">排序</text>
					<input type="number" v-model="formData.sort" placeholder="请输入排序号" />
				</view>
				<view class="form-item">
					<text class="label">状态</text>
					<switch :checked="formData.status === 1" @change="e => formData.status = e.detail.value ? 1 : 0"
						color="#46b0fe" />
				</view>
				<view class="popup-buttons">
					<button class="btn cancel" @tap="popup.close()">取消</button>
					<button class="btn confirm" @tap="submitForm">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
.banner-manage {
	min-height: 100vh;
	padding: 24rpx;
	background-color: $page-bg-color;

	.banner-list {
		.banner-item {
			margin-bottom: 24rpx;
			background-color: #fff;
			border-radius: 16rpx;
			overflow: hidden;

			.banner-image {
				width: 100%;
				height: 300rpx;
			}

			.banner-info {
				padding: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.sort {
					font-size: 26rpx;
					color: $text-font-color-2;
				}

				.status {
					font-size: 26rpx;
					color: #52c41a;

					&.disabled {
						color: $text-font-color-3;
					}
				}

				.actions {
					display: flex;
					gap: 16rpx;

					.btn {
						padding: 8rpx 24rpx;
						border-radius: 8rpx;
						font-size: 24rpx;
						line-height: 1.5;
						background-color: transparent;

						&::after {
							border: none;
						}

						&.edit {
							color: $brand-theme-color;
							border: 2rpx solid $brand-theme-color;
						}

						&.delete {
							color: #ff4d4f;
							border: 2rpx solid #ff4d4f;
						}

						&:active {
							opacity: 0.8;
						}
					}
				}
			}
		}
	}

	.safe-area {
		height: 120rpx;
		width: 100%;
	}

	.add-btn {
		position: fixed;
		right: 48rpx;
		bottom: calc(48rpx + env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		padding: 24rpx 48rpx;
		background-color: $brand-theme-color;
		border-radius: 44rpx;
		color: #fff;
		box-shadow: 0 4rpx 16rpx rgba(70, 176, 254, 0.3);

		text {
			margin-left: 12rpx;
			font-size: 28rpx;
		}

		&:active {
			opacity: 0.8;
		}
	}
}

.popup-content {
	padding: 24rpx;
	width: 560rpx;
	background-color: #fff;
	border-radius: 12rpx;

	.popup-title {
		text-align: center;
		font-size: 28rpx;
		font-weight: 600;
		margin-bottom: 24rpx;
	}

	.form-item {
		margin-bottom: 24rpx;

		.label {
			display: block;
			margin-bottom: 12rpx;
			font-size: 26rpx;
			color: $text-font-color-2;
		}

		input {
			width: 100%;
			height: 80rpx;
			padding: 0 24rpx;
			background-color: $page-bg-color;
			border-radius: 8rpx;
			font-size: 26rpx;
			box-sizing: border-box;
		}
	}

	.popup-buttons {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 24rpx;
		gap: 24rpx;

		.btn {
			flex: 1;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			border-radius: 8rpx;
			font-size: 26rpx;

			&.cancel {
				background-color: $page-bg-color;
				color: $text-font-color-2;
			}

			&.confirm {
				background-color: $brand-theme-color;
				color: #fff;
			}

			&:active {
				opacity: 0.8;
			}
		}
	}
}
</style>